<template>
  <el-card>
    <el-scrollbar max-height="400px">
      <!-- 待办事项列表 -->
      <!--  待办事项名称输入框  -->
      <div class="wait-done-list-wrapper">
        <div class="wait-done-item" v-for="item in waitDoneList" :key="item.id">
          <el-checkbox v-model="item.checked">{{ item.name }}</el-checkbox>
          <el-tag closable @close="deleteItem(item)" type="danger">删除</el-tag>
        </div>
      </div>
      <div class="input-wrapper">
        <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
      </div>
      <!--  按钮区域 -->
      <div class="button-wrapper">
        <el-button type="primary" @click="add">添加</el-button>
        <el-button type="success" @click="done">完成</el-button>
      </div>
    </el-scrollbar>
  </el-card>
</template>

<script>
import {defineComponent, ref} from "vue";
import {ElMessage} from "element-plus";
import {useStore} from 'vuex'

export default defineComponent({
  name: "Add",
  setup() {
    let initId = 1

    const store = useStore()
    const waitDoneList = store.state.add.waitDoneList

    const addItem = item => store.commit('addItem', item)
    const deleteByItem = item => store.commit('deleteByItem', item)
    const addDelete = item => store.commit('addDelete', item)
    const addDone = item => store.commit('addDone', item)

    let inputValue = ref('')

    const deleteItem = item => {
      //在当前列表中删除
      deleteByItem(item)
      //添加到deleteStore
      addDelete(item)
    }
    const done = () => {
      //查找出勾选的列表
      const checkedList = store.getters.checkedList
      //没有勾选提示异常
      if (!checkedList || checkedList.length === 0) {
        return ElMessage.warning({
          message: '请勾选事项',
          type: 'warning'
        })
      }
      //从当前列表中删除
      checkedList.forEach(e => {
        deleteByItem(e)
      })
      //添加到doneStore
      checkedList.forEach(e => {
        addDone(e)
      })
    }
    const add = () => {
      if (inputValue.value === '') {
        return ElMessage.warning({
          message: '请输入内容',
          type: 'warning'
        })
      }
      const iv = inputValue.value
      addItem({
        id: initId++,
        name: iv,
        checked: false
      })
      inputValue.value = ''
    }
    return {
      inputValue,
      waitDoneList,
      add,
      done,
      deleteItem
    }
  }
})
</script>

<style lang="scss" scoped>
.el-card {
  .wait-done-list-wrapper {
    .wait-done-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px;
    }
  }
  .input-wrapper {
    margin-top: 20px;
  }
  .button-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
  }
}
</style>
